<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景图片</title>
		<style>
			bo dy{
				width: 100%;
				height: 1000000px;
				background-image: url(img/奥拉星绿野扉光·王者可兰_爱给网_aigei_com.png);
				background-size: contain;
				/* 函数 cover 等比例放大图片     特点：原图按照比例放大存背景空间
				        【开发者：背景图大小是否等于背景空间】
				        contain 等比例缩放图片   特点：图片按照比例缩放存背景空间
						【开发者：背景图等比例显示在背景空间】
				*/
			   /*背景附件--尺寸中存在cover或者contain*/
			   background-attachment: fixed;/*背景图  fixed 固定   scroll 不固定*/
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #ffff00;
				background-image: url(img/奥拉星绿野扉光·王者可兰_爱给网_aigei_com.png);
				/* 问题：超大图-不显示 小图-显示 
				注意：背景空间大小，如果图小于背景空间--平铺
				*/
			   background-repeat: no-repeat;
				/* no-repeat不平铺  repeat-x，y 横纵向平铺 */
				background-size: 30%;
				/* 背景尺寸属性值：数值px % | 函数 cover contain*/
				/* 背景定位：前提背景空间大于背景图 关键字：center、left、right、top、bottom.... */
				background-position: 60% 80%;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, distinctio. Neque labore similique tenetur consectetur dolor nostrum ducimus ad non amet porro, sequi velit, placeat voluptatum. Nisi esse impedit tempore?
		<!-- html img图片 引入一张图片，位置不可以随便改变
		 css 背景图片     引入一张图片，位置可以随意改变
		  子属性 background-color 背景颜色
		        backeground-image 背景图
				background-repeat 背景重复
				background-size   背景尺寸
				background-attachment 背景附件
				background-position  背景定位
		  复合属性 background：backeground-image background-color  background-position
		                      background-size   background-repeat和background-attachment
		   简写属性 background：backeground-image background-position/background-size background-repeat
		   替代子属性
		  -->
		  <div></div>
	</body>
</html>